import React, { Component } from 'react';
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import './App.css';

export default class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        name: '张三',
        done: true,
      },
      {
        id: 2,
        name: '李四',
        done: false,
      },
    ],
  };
  addTodo = (todoObj) => {
    const newTodos = [todoObj, ...this.state.todos];
    this.setState({ todos: newTodos });
  };
  changeTodo = (todoObj) => {
    const { todos } = this.state;
    const newTodos = todos.map((todo) => todo.id === todoObj.id ? todo = { ...todoObj } : todo);
    this.setState({ todos: newTodos });
  };
  delTodo = (todoId) => {
    const { todos } = this.state;
    const newTodos = todos.filter((todo, index) => {
      return todoId !== todo.id
    })    
    this.setState({todos: newTodos })
  } 
  checkAll = (isChecked) => {
    const {todos} = this.state
    const newTodos = todos.map(todo => {
       return { ...todo, done: isChecked}
    })
    this.setState({todos: newTodos })
  }
  delTodoAll = () => {
    const newTodos = this.state.todos.filter(todo => {
      return todo.done === false
    })
    this.setState({todos: newTodos })
  } 
  render() {
    const { todos } = this.state;
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <Content todos={todos} changeTodo={this.changeTodo} delTodo={this.delTodo}/>
          <Footer todos={todos} checkAll={this.checkAll} delTodoAll={this.delTodoAll}/>
        </div>
      </div>
    );
  }
}
